<template>
   <div class="addclassify">
      <div class="title">
         <button @click="createClassify">添加分类</button>
      </div>
   </div>
   <el-table :data="SystemData.SystemClassifyList" stripe style="width: 100%" max-height="580">
      <el-table-column prop="classify_sort" label="权重" width="120">
         <template #default="row">
            <el-input v-model="row.row.classify_sort" />
         </template>
      </el-table-column>
      <el-table-column prop="classify_name" label="分类名称" width="200">
         <template #default="row">
            <el-input v-model="row.row.classify_name" />
         </template>
      </el-table-column>
      <el-table-column prop="classify_portrait" label="分类封面">
         <template #default="row">
            <el-input v-model="row.row.classify_portrait" />
         </template>
      </el-table-column>
      <el-table-column prop="_id" label="操作" fixed="right" width="160">
         <template #default="row">
            <div style="display: flex;">
               <button style="background: #df890b;" @click="updateClassify(row.row)">保存</button>
               <button style="background: #a1241b;margin: 0;" @click="deleteClassify(row.row)">删除</button>
            </div>
         </template>
      </el-table-column>
   </el-table>
</template>
<script lang="ts" setup >
import { storeToRefs } from 'pinia';
import { ElMessage } from "element-plus";
const { userinfo } = storeToRefs(cnyzsUserpinia())

const props = defineProps({
   SystemData: {
      type: Object,
      default: {
         SystemInfo: {},
         SystemConfig: {},
         SystemAnnounceList: [],
         SystemUserInfo: [],
         SystemUserList: [],
         SystemClassifyList: [],
         SystemPostsList: [],
      }
   }
})


// 创建分类
const createClassify = async () => {
   // 據點創建者
   if (props.SystemData.SystemInfo.systemCreateUser._id === userinfo.value._id) return create()
   // 據點管理員
   if (props.SystemData.SystemInfo.systemAuth.some((v: any) => v._id === userinfo.value._id)) return create()
   async function create() {
      const res: any = await cnyzsRequest('/api/cnyzs-system-classify/create', {
         method: 'POST', data: {
            systemId: props.SystemData.SystemInfo._id, // 系统ID
            // 分类名称
            classify_name: '新分类',
            // 分类排序
            classify_sort: 0,
            // 分类头像
            classify_portrait: '',
         }
      })
      if (res.status === 200) {
         props.SystemData.SystemClassifyList = res.data
         return ElMessage.success(res.message)
      }
      ElMessage.warning(res.message)
   }
}
// 修改分类
const updateClassify = async (data: any) => {
   if (!data.classify_name) return ElMessage.warning('不能为空')
   // 據點創建者
   if (props.SystemData.SystemInfo.systemCreateUser._id === userinfo.value._id) return update()
   // 據點管理員
   if (props.SystemData.SystemInfo.systemAuth.some((v: any) => v._id === userinfo.value._id)) return update()

   async function update() {
      const res: any = await cnyzsRequest('/api/cnyzs-system-classify/update', {
         method: 'POST', data: {
            systemId: props.SystemData.SystemInfo._id, // 系统ID
            data
         }
      })
      if (res.status === 200) {
         return ElMessage.success(res.message)
      }
      ElMessage.warning(res.message)
   }
}
// 删除分类
const deleteClassify = async (data: any) => {
   // 據點創建者
   if (props.SystemData.SystemInfo.systemCreateUser._id === userinfo.value._id) return deleteC()
   // 據點管理員
   if (props.SystemData.SystemInfo.systemAuth.some((v: any) => v._id === userinfo.value._id)) return deleteC()
   async function deleteC() {
      const res: any = await cnyzsRequest('/api/cnyzs-system-classify/delete', {
         method: 'POST', data: {
            systemId: props.SystemData.SystemInfo._id, // 系统ID
            data
         }
      })
      if (res.status === 200) {
         props.SystemData.SystemClassifyList = res.data || props.SystemData.SystemClassifyList
         return ElMessage.success(res.message)
      }
      ElMessage.warning(res.message)
   }
}

</script>
<style lang="scss" scoped>
button {
   background-color: #1b5fa1;
   border: 0;
   box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
   color: #fdfdfd;
   cursor: pointer;
   display: flex;
   align-items: center;
   font-size: 14px;
   font-weight: 600;
   height: 35px;
   justify-content: center;
   margin-right: 15px;
   padding: 0 15px;
   transition: all 0.2s;
   border-radius: 8px;

   &:hover {
      opacity: .8;
   }
}

input {
   width: 570px;
   height: 45px;
   border: 0;
   font-size: 16px;
   background-color: #FFF;
   border-bottom: 1px solid #f5f6f7;
   caret-color: var(--aoir-color-primary-2);
   padding: 0 10px;
   border-radius: var(--aoir-border-radius);
   box-shadow: 0 0 35px 0 rgb(108 108 108 / 10%);

   &::placeholder {
      color: #CCD0DB;
   }
}

.title {
   display: flex;
   align-items: center;
   margin-bottom: 20px;

   .btnActive {
      background-color: #1b5fa1;
   }
}
</style>